<template>
    <div class="charge-container">
       <template>
            <el-table
    :data="vipList"
    border
    style="width: 100%">
     <el-table-column
          
          label="vip图片"
          align="center"
          width="150"
        >
        <template v-slot="{row}">
			<el-avatar shape="square"
				:size="50"
				fit="scale-down"
				:src="row.imageUrl">
            </el-avatar>
		</template>
        </el-table-column>
    <el-table-column
      prop="productName"
      label="产品名称"
      width="180">
    </el-table-column>
    <el-table-column
      prop="description"
      label="产品描述"
      width="180">
    </el-table-column>
    <el-table-column
      prop="price"
      label="价格">
    </el-table-column>
     <el-table-column
      prop="inventory"
      label="库存">
    </el-table-column>
     <el-table-column
      label="操作">
     <template v-slot="{row}">
          <el-button @click="pre_order(row)">去充值</el-button>
     </template>
    </el-table-column>
  </el-table>
       </template>
    </div>
</template>
<script>
import * as shoppingApi from "../../../../api/shopping"
import {mapMutations} from "vuex"
export default {
    data() {
        return {
            vipList:[]
        }
    },
    created () {
        shoppingApi.getVipListApi("20210827165510715").then(res=>{
            // console.log(res);
            // console.log(111);
            if(res.data.state){
                this.vipList=res.data.data
            }else{
                this.$message.error('获取失败')
            }
        })
    },
    methods: {
        ...mapMutations(["SET_CURRENT_CHARGE_PRODUCT"]),
        pre_order(row){
            // console.log(row);
            // 获得当前这一行的product_id产品id
            this.$confirm(`你正在购买${row.productName}, 是否确认?${row.description}`, '购买提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'success'
				}).then(() => {
					//1.将当前购买的商品,存到vuex
					//给row添加一个属性,quantity
                    row.quantity=0;
                    //2. 页面跳转到pre_order
                   
                    this.SET_CURRENT_CHARGE_PRODUCT(row);
                    this.$router.push({name:"pre_order"})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消购买'
					});
				});
        }
    }
}
</script>
<style scoped lang="less">
    .el-avatar{
        /deep/ img{
            width:100%;
        }
        height: 30px!important;
        background-color: #fff;
    }
</style>